import React from 'react';
import { NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Area, Field } from "react-vant";
import { areaList } from "@vant/area-data";
import { Card } from "react-vant";


function Di() {
  const navigate = useNavigate();
  const [value, setValue] = React.useState(["220000", "220300", "220303"]);
  
  return (
    <div>
      <div>
        <NavBar onClickLeft={() => navigate(-1)} />
      </div>
      <div style={{ margin: "10px" }}>
        <h2>请选择你所在的位置</h2>
        <p style={{ color: "#ccc" }}>我们会根据你的位置，推荐热门景点</p>
      </div>
      <div>
        <Area
          popup={{
            round: true,
          }}
          title="标题"
          value={value}
          areaList={areaList}
          onConfirm={setValue}
        >
          {(_, selectRows, actions) => {
            return (
              <Field
                label="选择地区"
                value={selectRows.map((row) => row?.text).join(",")}
                onClick={() => actions.open()}
              />
            );
          }}
        </Area>
      </div>
      <div>
        <p>热门地区</p>
        <Card round style={{backgroundColor: "#ccc", margin:"10px"}}>
          <Card.Header>杭州市</Card.Header>
          <Card.Body>浙江省，杭州市</Card.Body>
        </Card>
        <Card round style={{backgroundColor: "#ccc", margin:"10px"}}>
          <Card.Header>上海市</Card.Header>
          <Card.Body>上海市</Card.Body>
        </Card>
        <Card round style={{backgroundColor: "#ccc", margin:"10px"}}>
          <Card.Header>北京市</Card.Header>
          <Card.Body>北京市</Card.Body>
        </Card>
      </div>
    </div>
  );
}

export default Di;
